<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top: 5%; height: 85%; overflow-y: hidden"
  >
    <a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
      <a-col :md="10" :sm="24">
        <a-card :bordered="false" :title="title + 'banner信息'">
          <a-form-model ref="form" :model="model">
            <a-form-model-item label="banner名称" required prop="title">
              <a-input v-model="model.title" placeholder="请输入banner名称" />
            </a-form-model-item>
            <a-form-model-item label="上传banner图" required prop="bannerUrl">
              <j-image-upload class="avatar-uploader" text="上传" :isMultiple="false" v-model="model.bannerUrl"></j-image-upload>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </a-col>
      <a-col :md="14" :sm="24">
        <a-card :bordered="false" title="选择关联活动">
          <a-form-model>
            <a-form-model-item label="活动名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-row type="flex" :gutter="8">
                <a-col :span="18">
                  <a-input-search
                    :style="{ width: '100%' }"
                    placeholder="请输入活动名称"
                    v-model="queryParam.title"
                    @search="onSearch"
                  ></a-input-search>
                </a-col>
                <a-col :span="6">
                  <a-button @click="searchReset(1)" icon="redo">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-form-model>
          <!--用户列表-->
          <a-table
            ref="table"
            :scroll="{ x: 700 }"
            size="small"
            rowKey="id"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
          >
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { filterObj } from '@/utils/util'
import { getAction, postAction } from '@/api/manage'
import { addBanner, editBanner } from '@/api/api'
export default {
  name: 'RoleModal',
  data() {
    return {
      title: '操作',
      visible: false,
      selectedRowKeys: [],
      model: {},
      scrollTrigger: {},
      dataSource: [],
      columns: [
        {
          title: '活动名称',
          align: 'center',
          width: 90,
          dataIndex: 'title',
          ellipsis: true,
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={text}>
              {text}
            </a-tooltip>
          ),
        },
        {
          title: '活动地址',
          align: 'center',
          width: 90,
          dataIndex: 'address',
          ellipsis: true,
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={text}>
              {text}
            </a-tooltip>
          ),
        },
        {
          title: '价格',
          align: 'center',
          width: 40,
          dataIndex: 'price',
          customRender: function (t) {
            return t + '元'
          },
        },
        {
          title: '创建时间',
          align: 'center',
          width: 110,
          dataIndex: 'createTime',
        },
      ],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      queryParam: {
        username: '',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
      loading: false,
      confirmLoading: false,
    }
  },
  created() {
    //备份model原始值
    //this.modelDefault = JSON.parse(JSON.stringify(this.model));
    this.resetScreenSize()
    this.loadData()
  },
  methods: {
    searchReset(arg){
      this.queryParam.title="";
      this.loadData(arg)
    },
    async loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      let params = this.getQueryParams() //查询条件
      this.loading = true
      postAction('/wx/activity/list', params)
        .then((res) => {
          if (res.code === 20000) {
            this.dataSource = res.data.records
            this.ipagination.total = res.data.total
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    getQueryField() {
      let str = 'id,'
      for (let a = 0; a < this.columns.length; a++) {
        str += ',' + this.columns[a].dataIndex
      }
      return str
    },
    handleTableChange(pagination, filters, sorter) {
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    // 触发屏幕自适应
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.scrollTrigger = { x: 800 }
      } else {
        this.scrollTrigger = {}
      }
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      // selectionRows.forEach(row => pushIfNotExist(this.selectionRows, row, 'id'))
    },
    add() {
      let that = this
      that.visible = true
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize()
    },
    edit(record) {
      let that = this
      this.visible = true
      this.resetScreenSize()
      that.model = Object.assign({}, record)
      that.selectedRowKeys=[];
      that.selectedRowKeys.push(record.actId);
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      const params = this.model
      params.actId = this.selectedRowKeys[0]
      let obj
      if (!this.model.id) {
        obj = addBanner(params)
      } else {
        obj = editBanner(params)
      }
      obj.then((res) => {
        if (res.code === 20000) {
          that.$message.success('添加成功！')
          that.close()
          that.$emit('ok')
        } else {
          that.$message.warning('添加失败！')
          that.close()
        }
      })
    },
    handleCancel() {
      this.close()
    },
    onSearch() {
      this.loadData()
    },
  },
}
</script>

<style scoped>
</style>